<template>
  <div>

	<myheader></myheader>

	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>
	

	<section class="featured-block text-center">
		<div class="container">
			
		<div>
			用户名：<input type="text" v-model="username">
		</div>

		<br><br>
		
		<div>
			密码：<input type='password' v-model="password">
		</div>

		<br><br>

		<center>
		<div>

			<drag-verify
			:width='width'
			:height='height'
			:text="text"
			ref="Verify">

			</drag-verify>

		</div>
		</center>


		<br><br>


		<!-- ui专属控件 -->
		<Button @click="submit">提 交</Button>

		<br><br>

        <div>
            <img src="http://localhost:8000/static/sina.png" @click="sinl">
			
			&nbsp;&nbsp;&nbsp;&nbsp;
			<img src="http://localhost:8000/static/dingding.png" @click="dd">
        </div>
		

		</div>
	</section>
	
	<myfooter></myfooter>
	
	
	
    
  </div>
  
</template>


 
<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

//导入 滑块验证码
import dragVerify from 'vue-drag-verify';




export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{'home':'index'}},{title:'登录页面'}],

	  msg: "这是一个变量",
	  username:'',
	  password:'',
	  width:300,
	  height:42,
	  text:'请将滑块拖动到右侧',

	  
    }
  },




// 定义组件
components:{
	'myheader':myheader,
	'myfooter':myfooter,
	'dragVerify':dragVerify,
},




//初始化钩子方法
mounted:function(){

},




methods:{

	//新浪微博登录
	sinl(){
		let url = "https://api.weibo.com/oauth2/authorize?client_id=3405127097&response_type=code&redirect_uri=http://127.0.0.1:8000/wbtoken/";

		//跳转
		window.location.href = url;
	},


	//钉钉登录
	dd(){
		let url = "https://oapi.dingtalk.com/connect/qrconnect?appid=dingoaozqcikkdml2pbzx8&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8000/ddback/";

		//跳转
		window.location.href = url;
	},

	




	//提交事件
	submit:function(){

		//判断是否拖动滑块
		console.log(this.$refs.Verify.isPassing);
		if(this.$refs.Verify.isPassing==false){
			this.$Message('请拖动滑块')
			return false
		}



		//判断用户是否输入
		if(this.username == ''){
			// this.$message('用户名不能为空')

			this.$Message('用户名不能为空')
			return false;
		}

		//判断密码是否为空
		if(this.password == ''){
			this.$Message('密码不能为空')
			return false;
		}
	
	


	//请求后台接口
	this.axios.get('http://localhost:8000/login/',{params:{username:this.username,
	password:this.password}}).then((res)=>{
		console.log(res);
		this.$Message(res.data.message)

		//判断返回信息状态
		if(res.data.code==200){
			//在本地保存  uid  username
			localStorage.setItem('username',res.data.username)
			localStorage.setItem('uid',res.data.uid)

			//跳转首页
			this.$router.push('/')
		}else{
			this.$Message(res.data.message)
		}
	})
},


}






}
</script>
 



<style>



</style>